<template>
<Transition name="messagebox-fade">
<div class="message-box" v-if="state.visible" >
<div class="wrapper">
<header class="box-hd">
<h1>{{ title }}</h1>
</header>
<div class="box-board">
    <component :is="insert"></component>
    <div class="btn-group">
    <my-button type="defalut" @click="handleCancelClick">{{ btnCancelText }}</my-button>
    <my-button type="primary" @click="handleConfirmClick">{{ btnConfirmText }}</my-button>

    </div>
</div>
</div>
</div>
</Transition>
</template>
<script setup>
import { reactive,h } from "vue";
import MyButton from "../MyButton";

const props = defineProps({
    title: {
        type: String,
        default: '提示'
    },
    btnCancelText: {
        type: String,
        default: '取消'
    },
    btnConfirmText: {
        type: String,
        default: '确定'
    },
    insert: Object // insert 是一个对象，组件，h函数，动态组件 component h函数转虚拟节点
})
const state = reactive({
    visible:false,
    type:'CONFIRM'
})

const handleCancelClick = () => {
    state.type= 'CANCEL'
    setVisible(false)
}
const handleConfirmClick = () => {
    state.type= 'CONFIRM'
    setVisible(false)
}
const setVisible = (isVisible) =>{
    state.visible = isVisible;
}
defineExpose({
    state,
    setVisible,
})
</script>
<style lang="scss" scoped>
.messagebox-fade-enter-from, .messagebox-fade-leave-to{
    opacity: 0;
}
.messagebox-fade-enter-active{
    transition: opacity .2s ease-in;
}
.messagebox-fade-leave-active{
    transition: opacity .2s ease-out;
}
.message-box{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    width: 100%;
    height: 100vh;

    .wrapper{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 300px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,.5);

        .box-hd{
            height: 44px;
            line-height: 44px;
            background-color: #17a2b8;
            color: #fff;
            padding: 0 10px;
            box-sizing: border-box;
            h1{
                font-size: 18px;
            }

        }
        .box-board{
            padding: 15px;
            box-sizing: border-box;
            .btn-group{
                display: flex;
                justify-content: flex-end;
                margin: 15px 0;
                button{
                    margin-left: 10px;
                }
            }
        }
    }
}




</style>